<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <script src="/js/vue.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="../js/lib-master/index.js"></script>
  
    <link rel="stylesheet" href="../js/lib-master/theme-chalk/index.css">

</head>
<body>
    <div id="app">
            订单状态：
            <el-select v-model="value" filterable placeholder="请选择"  @change="getByOrderState">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">{{item.label}}</el-option>
            </el-select>
            <input type="reset" id="orderReset" @click="orderReset()"  />
            <br />
            <el-table :data="orderData" :cell-style="rowStyle">
              <el-table-column prop="orderDetailsID" label="订单编号"></el-table-column>
              <el-table-column prop="orderDate" label="提交时间"></el-table-column>
              <el-table-column prop="productDetailID" label="商品编号"></el-table-column>
              <el-table-column prop="productName" label="商品名称"></el-table-column>
              <el-table-column prop="userAccount" label="用户编号"></el-table-column>
              <el-table-column prop="userName" label="用户名称"></el-table-column>
              <el-table-column prop="productDetailAmount" label="商品数量"></el-table-column>
              <el-table-column prop="orderTotalPrice" label="订单金额"></el-table-column>
              <el-table-column prop="orderMode" label="支付方式"></el-table-column>
              <el-table-column prop="state" label="订单状态">
                <template scope="scope">    
                  <el-tag v-if="scope.row.state == 1">未付款</el-tag>
                  <el-tag v-if="scope.row.state == 2">已付款</el-tag>
                  <el-tag v-if="scope.row.state == 3">已发货</el-tag>
                  <el-tag v-if="scope.row.state == 4">已完成</el-tag>             
                </template>
              </el-table-column>
             <el-table-column prop="state" label="是否发货">
                <template slot-scope="scope">
                  <input @click="Receiving(scope.row.state)" v-if="scope.row.state == 1" type="button" value="确认发货" disabled>
                  <input @click="Receiving(scope.row)" v-if="scope.row.state == 2" type="button" value="确认发货">
                  <input @click="Receiving(scope.row.state)" v-if="scope.row.state == 3" type="button" value="确认发货" disabled>
                  <input @click="Receiving(scope.row.state)" v-if="scope.row.state == 4" type="button" value="确认发货" disabled>
                </template>
              </el-table-column>
            </el-table>
    </div>
    <script src="/js/backcommon.js"></script>
    <script>
    
        let vm = new Vue({
          el: "#app",
          data: {
            orderData:[],

            options: [{
              value: '1',
              label: '未付款'
            }, {
              value: '2',
              label: '已付款'
            }, {
              value: '3',
              label: '已发货'
            }, ],
            value: ''
          },
          created: function () {
            this.getOrderList()
          },
          methods: {
            rowStyle() {
              return "text-align:center";
            },
            // 显示订单数据
            getOrderList:function(){
              axios.post("/order/getAll").then(function(resp){
                vm.orderData=resp.data.data
              }) 
            },
            // 订单状态下拉框
            getByOrderState(e){
              axios.get("/order/getAllState",{params:{orderState:e.value}}).
                then(function(resp){
                  if(200==resp.data.code){
                    if(resp.data.data==0){
                      alert('没有此类订单')
                    }else{
                      vm.orderData=resp.data.data
                    }
                  }
              })
            },
            // 发货按钮
            Receiving:function(row){
                this.$confirm('是否发货?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.get("/backOrder/update?orderID="+row.orderID+"&account="+row.userAccount+"&state=3")
                    .then((resp) => {
                      console.log(resp.data.code)
                      if (200 == resp.data.code) {
                        
                        this.$message({
                          type: 'success',
                          message: '发货成功!'
                        });
                        this.getOrderList();
                      }
                    });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                  });
                });
            },
            // 重置
            orderReset:function(){
                vm.getOrderList()
            },
          }
        })
      </script>
</body>
</html>